<template>
    <div id="app">
        <el-form :model="form" label-width="30%">
            <el-form-item label="用户名:">
                <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="密 码:">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="邮 箱:">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="工 号:">
                <el-input v-model="form.jobNum"></el-input>
            </el-form-item>
            <el-form-item label="手机号:">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="性 别:">
                <el-select v-model="form.sex" placeholder="性别">
                    <el-option label="男" value="f"></el-option>
                    <el-option label="女" value="m"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">注 册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    define(["vue", "axios"], function(Vue, axios) {
        return Vue.component("register", {
            template: template,
            data: function() {
                return {
                    form:{
                        userName:"",
                        password:"",
                        email:"",
                        phone:"",
                        sex:"",
                        jobNum:""
                    }
                };
            },
            methods:{
                onSubmit:function () {
                    var _this = this;
                    axios.post('register/addUser', _this.form).then(function (response) {
                        // if (response.data.success) {
                        //     _this.$message({
                        //         type: 'success',
                        //         message: "success"
                        //     });
                        // } else {
                        //     _this.$message({
                        //         message: response.data.description,
                        //         type: 'error',
                        //         duration: 2000
                        //     });
                        // }
                        console.log(response.data.data);
                        if (response.data.data){
                            _this.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                            _this.$router.push({ name: 'login' });
                        } else {
                            _this.$message.error('注册失败');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        });
    });
</script>

<style>
#app{
    width: 50%;
    margin-left: 25%;
    margin-top: 10%;
}
</style>